<template>
  <div class="dashboard">
    <div class="dashboard-header">
      <div class="dashboard-header-title">
        <!-- <el-icon>
          <Expand />
        </el-icon>
        <span>能耗总览</span> -->
      </div>
      <div class="dashboard-header-form">
        <el-select v-model="headerForm.projectId" placeholder="请选择"
          @change="houseSearch">
          <el-option v-for="item in projectOption" :key="item.id" :label="item.projectName" :value="item.id"/>
        </el-select>
        <el-select v-model="headerForm.houseId" placeholder="请选择" @change="headerSearch" clearable>
          <el-option v-for="item in roomOption" :key="item.id" :label="item.houseNum" :value="item.id" />
        </el-select>
      </div>
    </div>
    <div class="dashboard-card">
      <div class="card-items">
        <div class="card-items-header electro">
          <div class="card-items-header-title"><img src="../../assets/images/dbtn.png" alt=""><span>用电</span></div>
          <div class="card-items-header-data">
            <div class="card-items-header-data-item">
              <span class="header-data-item-sum">{{ usage.dayElec }}</span>
              <span class="header-data-item-title">今日用能(kW·h)</span>
            </div>
            <div class="card-items-header-data-item">
              <span class="header-data-item-sum">{{ usage.dayElecPre }}</span>
              <span class="header-data-item-title">昨日同期(kW·h)</span>
            </div>
            <div class="card-items-header-data-item">
              <div class="header-data-item-sum">
                {{ Math.floor(usage.dayElec - usage.dayElecPre > 0 ? '+' + usage.dayElec - usage.dayElecPre : usage.dayElec - usage.dayElecPre) }}
              </div>
              <div class="header-data-item-content"><span>环比</span>
                <span class="data-item-contentJust" v-if="(usage.dayElec - usage.dayElecPre) > 0">
                  {{ Math.floor((usage.dayElec - usage.dayElecPre) / usage.dayElecPre) }}%
                </span>
                <span class="data-item-contentLose textRedColor" v-else-if="(usage.dayElec - usage.dayElecPre) < 0">
                  {{ Math.floor((usage.dayElecPre - usage.dayElec) / usage.dayElecPre * 100) }}%
                </span>
                <span class="data-item-contentJust" v-else>0</span>
              </div>
            </div>
          </div>
        </div>
        <div class="card-items-content">
          <div class="card-items-content-data">
            <div class="card-items-content-data-item">
              <span class="content-data-item-sum">{{ usage.monthElec }}</span>
              <span class="content-data-item-title">当月用能(kW·h)</span>
            </div>
            <div class="card-items-content-data-item">
              <span class="content-data-item-sum">{{ usage.monthElecPre }}</span>
              <span class="content-data-item-title">上月同期(kW·h)</span>
            </div>
            <div class="card-items-content-data-item">
              <div class="content-data-item-sum textGreenColor" v-if="usage.monthElec - usage.monthElecPre >= 0">
                +{{ Math.floor(usage.monthElec - usage.monthElecPre) }}
              </div>
              <div class="content-data-item-sum textRedColor" v-else>
                {{ Math.floor(usage.monthElec - usage.monthElecPre) }}
              </div>
              <div class="content-data-item-content"><span>环比</span>
                <span class="data-item-contentJust textGreenColor" v-if="(usage.monthElec - usage.monthElecPre) > 0">
                  {{ Math.floor((usage.monthElec - usage.monthElecPre) / usage.monthElecPre) }}%
                </span>
                <span class="data-item-contentLose textRedColor" v-else-if="(usage.monthElec - usage.monthElecPre) < 0">
                  {{ Math.floor((usage.monthElecPre - usage.monthElec) / usage.monthElecPre * 100) }}%
                </span>
                <span class="data-item-contentJust" v-else>0</span>
              </div>
            </div>
          </div>
          <div class="card-items-content-data">
            <div class="card-items-content-data-item">
              <span class="content-data-item-sum">{{ usage.yearElec }}</span>
              <span class="content-data-item-title">今年用能(kW·h)</span>
            </div>
            <div class="card-items-content-data-item">
              <span class="content-data-item-sum">{{ usage.yearElecPre }}</span>
              <span class="content-data-item-title">去年同期(kW·h)</span>
            </div>
            <div class="card-items-content-data-item">
              <div class="content-data-item-sum textGreenColor" v-if="usage.yearElec - usage.yearElecPre >= 0">
                +{{ Math.floor(usage.yearElec - usage.yearElecPre) }}
              </div>
              <div class="content-data-item-sum textRedColor" v-else>
                {{ Math.floor(usage.yearElec - usage.yearElecPre) }}
              </div>
              <div class="content-data-item-content"><span>环比</span>
                <span class="data-item-contentJust textGreenColor" v-if="(usage.yearElec - usage.yearElecPre) > 0">
                  {{ Math.floor((usage.yearElec - usage.yearElecPre) / usage.yearElecPre) }}%
                </span>
                <span class="data-item-contentLose textRedColor" v-else-if="(usage.yearElec - usage.yearElecPre) < 0">
                  {{ Math.floor((usage.yearElecPre - usage.yearElec) / usage.yearElecPre * 100) }}%
                </span>
                <span class="data-item-contentJust" v-else>0</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-items">
        <div class="card-items-header water">
          <div class="card-items-header-title"><img src="../../assets/images/sbtn.png" alt=""><span>用水</span></div>
          <div class="card-items-header-data">
            <div class="card-items-header-data-item">
              <span class="header-data-item-sum">{{ usage.dayWater }}</span>
              <span class="header-data-item-title">今日用水(t)</span>
            </div>
            <div class="card-items-header-data-item">
              <span class="header-data-item-sum">{{ usage.dayWaterPre }}</span>
              <span class="header-data-item-title">昨日同期(t)</span>
            </div>
            <div class="card-items-header-data-item">
              <div class="header-data-item-sum">{{ Math.floor(usage.dayWater - usage.dayWaterPre > 0 ? '+' + usage.dayWater - usage.dayWaterPre : usage.dayWater - usage.dayWaterPre) }}</div>
              <div class="header-data-item-content"><span>环比</span>
                <span class="data-item-contentJust" v-if="(usage.dayWater - usage.dayWaterPre) > 0">
                  {{ Math.floor((usage.dayWater - usage.dayWaterPre) / usage.dayWaterPre) }}%
                </span>
                <span class="data-item-contentLose textRedColor" v-else-if="(usage.dayWater - usage.dayWaterPre) < 0">
                  {{ Math.floor((usage.dayWaterPre - usage.dayWater) / usage.dayWaterPre * 100) }}%
                </span>
                <span class="data-item-contentJust" v-else>0</span>
              </div>
            </div>
          </div>
        </div>
        <div class="card-items-content">
          <div class="card-items-content-data">
            <div class="card-items-content-data-item">
              <span class="content-data-item-sum">{{ usage.monthWater }}</span>
              <span class="content-data-item-title">当月用水(t)</span>
            </div>
            <div class="card-items-content-data-item">
              <span class="content-data-item-sum">{{ usage.monthWaterPre }}</span>
              <span class="content-data-item-title">上月同期(t)</span>
            </div>
            <div class="card-items-content-data-item">
              <div class="content-data-item-sum textGreenColor" v-if="usage.monthWater - usage.monthWaterPre >= 0">
                +{{ Math.floor(usage.monthWater - usage.monthWaterPre) }}
              </div>
              <div class="content-data-item-sum textRedColor" v-else>
                {{ Math.floor(usage.monthWater - usage.monthWaterPre) }}
              </div>
              <div class="content-data-item-content"><span>环比</span>
                <span class="data-item-contentJust textGreenColor" v-if="(usage.monthWater - usage.monthWaterPre) > 0">
                  {{ Math.floor((usage.monthWater - usage.monthWaterPre) / usage.monthWaterPre) }}%
                </span>
                <span class="data-item-contentLose textRedColor" v-else-if="(usage.monthWater - usage.monthWaterPre) < 0">
                  {{ Math.floor((usage.monthWaterPre - usage.monthWater) / usage.monthWaterPre * 100) }}%
                </span>
                <span class="data-item-contentJust" v-else>0</span>
              </div>
            </div>
          </div>
          <div class="card-items-content-data">
            <div class="card-items-content-data-item">
              <span class="content-data-item-sum">{{ usage.yearWater }}</span>
              <span class="content-data-item-title">今年用水(t)</span>
            </div>
            <div class="card-items-content-data-item">
              <span class="content-data-item-sum">{{ usage.yearWaterPre }}</span>
              <span class="content-data-item-title">去年同期(t)</span>
            </div>
            <div class="card-items-content-data-item">
              <div class="content-data-item-sum textGreenColor" v-if="usage.yearWater - usage.yearWaterPre >= 0">
                +{{ Math.floor(usage.yearWater - usage.yearWaterPre) }}
              </div>
              <div class="content-data-item-sum textRedColor" v-else>
                {{ Math.floor(usage.yearWater - usage.yearWaterPre) }}
              </div>
              <div class="content-data-item-content"><span>环比</span>
                <span class="data-item-contentJust textGreenColor" v-if="(usage.yearWater - usage.yearWaterPre) > 0">
                  {{ Math.floor((usage.yearWater - usage.yearWaterPre) / usage.yearWaterPre) }}%
                </span>
                <span class="data-item-contentLose textRedColor" v-else-if="(usage.yearWater - usage.yearWaterPre) < 0">
                  {{ Math.floor((usage.yearWaterPre - usage.yearWater) / usage.yearWaterPre * 100) }}%
                </span>
                <span class="data-item-contentJust" v-else>0</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-items">
        <div class="card-items-header useAir">
          <div class="card-items-header-title"><img src="../../assets/images/qbtn.png" alt=""><span>用气</span></div>
          <div class="card-items-header-data">
            <div class="card-items-header-data-item">
              <span class="header-data-item-sum">{{ usage.dayGas }}</span>
              <span class="header-data-item-title">今日用气(m3)</span>
            </div>
            <div class="card-items-header-data-item">
              <span class="header-data-item-sum">{{ usage.dayGasPre }}</span>
              <span class="header-data-item-title">昨日同期(m3)</span>
            </div>
            <div class="card-items-header-data-item">
              <div class="header-data-item-sum">{{ Math.floor(usage.dayGas - usage.dayGasPre > 0 ? '+' + usage.dayGas - usage.dayGasPre : usage.dayGas - usage.dayGasPre) }}</div>
              <div class="header-data-item-content"><span>环比</span>
                <span class="data-item-contentJust" v-if="(usage.dayGas - usage.dayGasPre) > 0">
                  {{ Math.floor((usage.dayGas - usage.dayGasPre) / usage.dayGasPre) }}%
                </span>
                <span class="data-item-contentLose textRedColor" v-else-if="(usage.dayGas - usage.dayGasPre) < 0">
                  {{ Math.floor((usage.dayGasPre - usage.dayGas) / usage.dayGasPre * 100) }}%
                </span>
                <span class="data-item-contentJust" v-else>0</span>
              </div>
            </div>
          </div>
        </div>
        <div class="card-items-content">
          <div class="card-items-content-data">
            <div class="card-items-content-data-item">
              <span class="content-data-item-sum">{{ usage.monthGas }}</span>
              <span class="content-data-item-title">当月用气(m3)</span>
            </div>
            <div class="card-items-content-data-item">
              <span class="content-data-item-sum">{{ usage.monthGasPre }}</span>
              <span class="content-data-item-title">上月同期(m3)</span>
            </div>
            <div class="card-items-content-data-item">
              <div class="content-data-item-sum textGreenColor" v-if="usage.monthGas - usage.monthGasPre >= 0">
                +{{ Math.floor(usage.monthGas - usage.monthGasPre) }}
              </div>
              <div class="content-data-item-sum textRedColor" v-else>
                {{ Math.floor(usage.monthGas - usage.monthGasPre) }}
              </div>
              <div class="content-data-item-content"><span>环比</span>
                <span class="data-item-contentJust textGreenColor" v-if="(usage.monthGas - usage.monthGasPre) > 0">
                  {{ Math.floor((usage.monthGas - usage.monthGasPre) / usage.monthGasPre) }}%
                </span>
                <span class="data-item-contentLose textRedColor" v-else-if="(usage.monthGas - usage.monthGasPre) < 0">
                  {{ Math.floor((usage.monthGasPre - usage.monthGas) / usage.monthGasPre * 100) }}%
                </span>
                <span class="data-item-contentJust" v-else>0</span>
              </div>
            </div>
          </div>
          <div class="card-items-content-data">
            <div class="card-items-content-data-item">
              <span class="content-data-item-sum">{{ usage.yearGas }}</span>
              <span class="content-data-item-title">今年用气(m3)</span>
            </div>
            <div class="card-items-content-data-item">
              <span class="content-data-item-sum">{{ usage.yearGasPre }}</span>
              <span class="content-data-item-title">去年同期(m3)</span>
            </div>
            <div class="card-items-content-data-item">
              <div class="content-data-item-sum textGreenColor" v-if="usage.yearGas - usage.yearGasPre >= 0">
                +{{ Math.floor(usage.yearGas - usage.yearGasPre) }}
              </div>
              <div class="content-data-item-sum textRedColor" v-else>
                {{ Math.floor(usage.yearGas - usage.yearGasPre) }}
              </div>
              <div class="content-data-item-content"><span>环比</span>
                <span class="data-item-contentJust textGreenColor" v-if="(usage.yearGas - usage.yearGasPre) > 0">
                  {{ Math.floor((usage.yearGas - usage.yearGasPre) / usage.yearGasPre) }}%
                </span>
                <span class="data-item-contentLose textRedColor" v-else-if="(usage.yearGas - usage.yearGasPre) < 0">
                  {{ Math.floor((usage.yearGasPre - usage.yearGas) / usage.yearGasPre * 100) }}%
                </span>
                <span class="data-item-contentJust" v-else>0</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dashboard-echarts">
      <div class="echarts-header">
        <div class="echarts-header-title">用能趋势</div>
        <div class="echarts-header-form">
          <el-radio-group v-model="energyForm.tabValue"
            @change="(e: any) => energySearch(e, 'tabValue', 'ele')">
            <el-radio-button v-for="(item, index) in tabsList" :key="index" :label="item.name" :value="item.value" />
          </el-radio-group>
          <el-select v-model="energyForm.energy" placeholder="请选择" @change="(e: any) => energySearch(e, 'energy', 'ele')">
            <el-option v-for="item in energyOption" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </div>
      </div>
      <div class="echarts-content">
        <div class="dailyTrend" v-show="energyForm.tabValue === '总用能'">
          <div>当日逐时趋势</div>
          <div ref="dailyTrendRef" style="width: 100%; height: 338px;"></div>
        </div>
        <div class="currentTrend" v-show="energyForm.tabValue === '总用能'">
          <div>当月逐日趋势</div>
          <div ref="currentTrendRef" style="width: 100%; height: 338px;"></div>
        </div>
        <div v-show="energyForm.tabValue === '分时段'" ref="dayPartingOneRef" style="width: 1068px; height: 386px;"></div>
        <div v-show="energyForm.tabValue === '分时段'" ref="dayPartingTwoRef" style="width: 492px; height: 386px;"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="Table">
import { nextTick, reactive, onBeforeUnmount, onMounted, ref } from 'vue';
import { getProjectList, getHouseList, getDashboard, getTrend } from '@/api/settle'
import * as echarts from 'echarts';

const headerForm = reactive({
  projectId: '', // 项目
  houseId: '', // 房间
})

const projectOption = ref([])
const roomOption = ref([])

getProjectList().then((res)=>{
  projectOption.value = res.data
  if (res.data.length) {
    headerForm.projectId = res.data[0].id
    getHouseList({id: headerForm.projectId}).then((r)=>{
      roomOption.value = r.data
      if (r.data.length) {
        headerForm.houseId = r.data[0].id
        headerSearchDashboard()
        headerSearchTrend()
      }
    })
    .catch((err)=>{
      console.error('err', err)
    })
  }
})
.catch((err)=>{
  console.error('err', err)
})

const houseSearch = (id: any) => {
  headerForm.houseId = ''
  headerSearchDashboard()
  headerSearchTrend()
  getHouseList({id: id}).then((res)=>{
    roomOption.value = res.data
  })
  .catch((err)=>{
    console.error('err', err)
  })
}

const headerSearch = () => {
  // 初始化图表展示
  tabsList.value = [
    {
      name: '分时段',
      value: '分时段'
    },
    {
      name: '总用能',
      value: '总用能'
    }
  ]
  energyForm.value.energy = '电'
  energyForm.value.tabValue = '分时段'
  headerSearchDashboard()
  headerSearchTrend()
}

const usage = reactive({
  dayElec: null,
  dayElecPre: null,
  monthElec: null,
  monthElecPre: null,
  yearElec: null,
  yearElecPre: null,
  dayWater: null,
  dayWaterPre: null,
  monthWater: null,
  monthWaterPre: null,
  yearWater: null,
  yearWaterPre: null,
  dayGas: null,
  dayGasPre: null,
  monthGas: null,
  monthGasPre: null,
  yearGas: null,
  yearGasPre: null
})

const headerSearchDashboard = () => { // 搜索框
  console.log('headerForm', headerForm)
  const params = {
    projectId: headerForm.projectId,
    houseId: headerForm.houseId,
  }
  getDashboard(params).then((res)=>{
    console.log('res', res.data)
    Object.assign(usage, res.data)
  })
  .catch((err)=> {
    console.error('err', err.msg)
  })
}

const dailyTrendRef = ref(); // 当日逐时趋势
const currentTrendRef = ref(); // 当月逐日趋势
const dayPartingOneRef = ref(); // 分时段one
const dayPartingTwoRef = ref(); // 分时段two

const tabsList = ref([
  {
    name: '分时段',
    value: '分时段'
  },
  {
    name: '总用能',
    value: '总用能'
  }
])

// one
const dayPartingOneDataList = ref([]); 

// two 
const monthTotal = reactive({
  list: [] as any
})
const monthTotalVal = ref(0)

// three ele
const dailyTrendData = ref([]);
// three water
const dailyTrendDataWater = ref([]);
// three gas
const dailyTrendDataGas = ref([]);

// four
const monthX = ref(['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日', '31日'])
// four ele
const monthY = ref([null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null])
const monthPreY = ref([null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null])
// four water
const monthYWater = ref([null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null])
const monthPreYWater = ref([null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null])
// four gas
const monthYGas = ref([null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null])
const monthPreYGas = ref([null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null])

const headerSearchTrend = () => { // 搜索框
  console.log('headerForm', headerForm)
  const params = {
    projectId: headerForm.projectId,
    houseId: headerForm.houseId,
  }
  getTrend(params).then((res)=>{
    console.log('resDashboard', res.data)
    // one
    dayPartingOneDataList.value = res.data.monthTrend.map((item: any)=>{
      return {
        name: item.statsDate.slice(-2) + '日',
        value1: item.dayElecTip,
        value2: item.dayElecPeak,
        value3: item.dayElecFlat,
        value4: item.dayElecValley,
        value5: item.dayElecRavine,
      }
    })
    console.log('dayPartingOneDataList.value', dayPartingOneDataList.value)
    dayPartingOneFn()
    // two
    const tempMonth = res.data.monthEnergy
    if (tempMonth) {
      monthTotalVal.value = tempMonth.monthElec
      monthTotal.list = [
      { value: tempMonth.monthElecTip, rate: tempMonth.monthElecTipRate, legendname: '尖', name: "尖", itemStyle: { color: "#FF5A5A" }, color: 'red' },
      { value: tempMonth.monthElecFlat, rate: tempMonth.monthElecFlatRate, legendname: '平', name: "平", itemStyle: { color: "#02CD93" }, color: 'green' },
      { value: tempMonth.monthElecPeak, rate: tempMonth.monthElecPeakRate, legendname: '峰', name: "峰", itemStyle: { color: "#F4B25A" }, color: 'yellow' },
      { value: tempMonth.monthElecValley, rate: tempMonth.monthElecValleyRate, legendname: '谷', name: "谷", itemStyle: { color: "#5FB3FF" }, color: 'kohlrabiblue' },
      { value: tempMonth.monthElecRavine, rate: tempMonth.monthElecRavineRate, legendname: '深谷', name: "深谷", itemStyle: { color: "#494dfe" }, color: 'darkBlue' },
      ]
      console.log('partTwo monthTotal.list', monthTotal.list)
      dayPartingTwoFn()
    }
    // three
    const day = res.data.dayTrend
    const preDay = res.data.dayPreTrend
    // TODO ele water gas
    dailyTrendData.value = day.map((item: any, index: any)=>{
      return {
        name: item.statsHour,
        value1: item.hourElec,
        value2: preDay[index]?.hourElec,
      }
    })
    dailyTrendDataWater.value = day.map((item: any, index: any)=>{
      return {
        name: item.statsHour,
        value1: item.hourWater,
        value2: preDay[index]?.hourWater,
      }
    })
    dailyTrendDataGas.value = day.map((item: any, index: any)=>{
      return {
        name: item.statsHour,
        value1: item.hourGas,
        value2: preDay[index]?.hourGas,
      }
    })
    console.log('dailyTrendData.value', dailyTrendData.value)
    console.log('dailyTrendDataWater.value', dailyTrendDataWater.value)
    console.log('dailyTrendDataGas.value', dailyTrendDataGas.value)
    // dailyTrendFn()
    // four
    // TODO ele gas water
    res.data.monthTrend.forEach((item: any) => {
      let day = parseInt(item.statsDate.slice(-2))
      monthY.value[day - 1] = item.dayElec
      monthYWater.value[day - 1] = item.dayWater
      monthYGas.value[day - 1] = item.dayGas
    })
    res.data.monthPreTrend.forEach((item: any)=>{
      let day = parseInt(item.statsDate.slice(-2))
      monthPreY.value[day - 1] = item.dayElec
      monthPreYWater.value[day - 1] = item.dayWater
      monthPreYGas.value[day - 1] = item.dayGas
    })
    console.log('monthY', monthY.value)
    console.log('monthPreY', monthPreY.value)
    console.log('monthYWater', monthYWater.value)
    console.log('monthPreYWater', monthPreYWater.value)
    console.log('monthYGas', monthPreY.value)
    console.log('monthPreYGas', monthPreYGas.value)
    // currentTrendFn()
  })
  .catch((err)=> {
    console.error('err', err.msg)
  })
}

const energyOption = ref([ // 用能列表
  {
    name: '电',
    value: '电'
  },
  {
    name: '水',
    value: '水'
  },
  {
    name: '气',
    value: '气'
  },
])

const energyForm = ref<{ [key: string]: string }>({
  energy: '电', // 用能列表选中
  tabValue: '分时段'
})

const windowResizeFn = () => {
  if (energyForm.value.tabValue === "总用能") {
    dailyTrendFn('ele')
    currentTrendFn('ele')
  } else {
    dayPartingOneFn()
    dayPartingTwoFn()
  }
}
onMounted(() => {
  windowResizeFn()
  window.addEventListener("resize", windowResizeFn)
})
onBeforeUnmount(() => {
  window.removeEventListener("resize", windowResizeFn)
})

// 当日逐时趋势
const dailyTrendFn = (v: any) => {
  console.log('v', v)
  let threeData = [] as any
  let unit = ''
  if (v=='ele') {
    threeData = dailyTrendData.value
    unit = 'kW·h'
  }
  if (v=='water') {
    threeData = dailyTrendDataWater.value
    unit = 't'
  }
  if (v=='gas') {
    threeData = dailyTrendDataGas.value
    unit = 'm³'
  }
  console.log('threeData', threeData)
  const chartInstance = echarts.init(dailyTrendRef.value);
  let xAxisData = threeData.map(v => v.name + '时');
  let yAxisData1 = threeData.map(v => v.value1);
  let yAxisData2 = threeData.map(v => v.value2);
  const color = ["#02C49B", "#FAB743"]
  const option = {
    backgroundColor: "#fff",
    color: color,
    legend: {
      right: '30%',
      top: '2%',
    },
    tooltip: {
      trigger: "axis",
    },
    grid: {
      top: 60,
      right: 14,
      left: 14,
      bottom: 0,
      containLabel: true
    },
    xAxis: [{
      type: "category",
      boundaryGap: false,
      axisLabel: {
        color: "#B0B3B7"
      },
      axisLine: {
        lineStyle: {
          color: "#D9D9D9"
        }
      },
      data: xAxisData
    }],
    yAxis: [{
      type: "value",
      name: unit,
      axisLabel: {
        color: "#B0B3B7"
      },
      nameTextStyle: {
        color: "#B0B3B7",
        fontSize: 12,
        lineHeight: 40
      },
      splitLine: {
        lineStyle: {
          type: "solid",
          color: "#F5F7FA"
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    }],
    series: [{
      name: "今日",
      type: "line",
      smooth: true,
      // showSymbol: false,/
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [{
            offset: 0,
            color: hexToRgba(color[0], 0.3)
          },
          {
            offset: 1,
            color: hexToRgba(color[0], 0.1)
          }
          ],
          false
        ),
        shadowColor: hexToRgba(color[0], 0.1),
        shadowBlur: 10,
      },
      data: yAxisData1
    }, {
      name: "昨日",
      type: "line",
      smooth: true,
      // showSymbol: false,
      data: yAxisData2
    }]
  };
  chartInstance.setOption(option);
  chartInstance.resize();
}

// 当月逐日趋势
const currentTrendFn = (v: any) => {
  console.log('v', v)
  let fourDataY = [] as any
  let fourDataPreY = [] as any
  let unit = ''
  if (v=='ele') {
    fourDataY = monthY.value
    fourDataPreY = monthPreY.value
    unit = 'kW·h'
  }
  if (v=='water') {
    fourDataY = monthYWater.value
    fourDataPreY = monthPreYWater.value
    unit = 't'
  }
  if (v=='gas') {
    fourDataY = monthYGas.value
    fourDataPreY = monthPreYGas.value
    unit = 'm³'
  }
  console.log('fourData', fourDataY)
  console.log('fourDataPreY', fourDataPreY)
  const chartInstance = echarts.init(currentTrendRef.value);
  const option = {
    backgroundColor: '#ffffff',
    tooltip: { //提示框组件
      trigger: 'axis',
      formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}',
      axisPointer: {
        type: 'shadow',
        label: {
          backgroundColor: '#6a7985'
        }
      },
    },
    grid: {
      top: 60,
      right: 14,
      left: 14,
      bottom: 0,
      containLabel: true,
    },
    legend: {//图例组件，颜色和名字
      right: '40%',
      top: '2%',
      itemGap: 16,
      itemWidth: 18,
      itemHeight: 10,
      data: [{
        name: '当月',
      },
      {
        name: '上月',
      }],
      textStyle: {
        color: '#333',
        fontSize: 14,
      }
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: true,//坐标轴两边留白
        data: monthX.value,
        axisLabel: { // 坐标轴刻度标签的相关设置。
          interval: 0,// 设置为 1，表示『隔一个标签显示一个标签』
          rotate: 45,
          color: '#B0B3B7',
          fontSize: 12,
        },
        axisTick: {// 坐标轴刻度相关设置。
          show: false,
        },
        axisLine: {// 坐标轴轴线相关设置
          lineStyle: {
            color: '#F5F7FA',
          }
        },
        splitLine: { // 坐标轴在 grid 区域中的分隔线。
          show: false,
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: unit,
        splitNumber: 5,
        axisLabel: {
          color: "#B0B3B7"
        },
        nameTextStyle: {
          color: "#B0B3B7",
          fontSize: 12,
          lineHeight: 40
        },
        splitLine: {
          lineStyle: {
            type: "solid",
            color: "#F5F7FA"
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
      }
    ],
    series: [
      {
        name: '当月',
        type: 'bar',
        data: fourDataY,
        barWidth: 5,
        barGap: 0,// 柱间距离
        label: {// 图形上的文本标签
          show: false,
        },
        itemStyle: {//图形样式
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 1, color: '#04CEA3'
          }, {
            offset: 0, color: '#00AA86'
          }], false),
        },
      },
      {
        name: '上月',
        type: 'bar',
        data: fourDataPreY,
        barWidth: 5,
        barGap: 0.2,//柱间距离
        label: {//图形上的文本标签
          show: false,
        },
        itemStyle: {//图形样式
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 1, color: '#5FB3FF'
          }, {
            offset: 0.5, color: '#91C9FF'
          }, {
            offset: 0, color: '#ABD0FF'
          }], false),
        },
      }
    ]
  }
  chartInstance.setOption(option);
  chartInstance.resize();
}

// 分时段one
const dayPartingOneFn = () => {
  const nameData = dayPartingOneDataList.value.map(v => v.name);
  const value1Data = dayPartingOneDataList.value.map(v => v.value1);
  const value2Data = dayPartingOneDataList.value.map(v => v.value2);
  const value3Data = dayPartingOneDataList.value.map(v => v.value3);
  const value4Data = dayPartingOneDataList.value.map(v => v.value4);
  const value5Data = dayPartingOneDataList.value.map(v => v.value5);
  const chartInstance = echarts.init(dayPartingOneRef.value);
  const option = {
    backgroundColor: "#ffffff",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        textStyle: {
          color: "#fff"
        }

      },
    },
    grid: {
      top: 50,
      right: 14,
      left: 14,
      bottom: 0,
      containLabel: true,
    },
    legend: {
      icon: 'circle',
      right: '35%',
      top: '2%',
      itemGap: 16,
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: '#90979c',
      },
      data: ['尖', '峰', '平', '谷', '深谷']
    },
    calculable: true,
    xAxis: [{
      type: "category",
      axisLine: {
        lineStyle: {
          color: '#B0B3B7'
        }
      },
      "splitLine": {
        "show": false
      },
      "axisTick": {
        "show": false
      },
      "splitArea": {
        "show": false
      },
      axisLabel: {
        interval: 0,
        rotate: 45,
      },
      data: nameData,
    }],
    yAxis: [
      {
        type: 'value',
        name: 'kW·h',
        splitNumber: 5,
        axisLabel: {
          color: "#B0B3B7"
        },
        nameTextStyle: {
          color: "#B0B3B7",
          fontSize: 12,
          lineHeight: 40
        },
        splitLine: {
          lineStyle: {
            type: "solid",
            color: "#F5F7FA"
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
      }
    ],
    series: [
      {
        name: "尖",
        type: "bar",
        stack: "总量",
        barMaxWidth: 35,
        barGap: "10%",
        itemStyle: {
          color: "#FF5A5A",
        },
        "data": value1Data,
      },
      {
        name: "峰",
        type: "bar",
        stack: "总量",
        itemStyle: {
          color: "#F7B955",
          borderRadius: 0,
        },
        data: value2Data
      },
      {
        name: "平",
        type: "bar",
        stack: "总量",
        itemStyle: {
          color: "#04CDA2",
          borderRadius: 0,
        },
        data: value3Data
      },
      {
        name: "谷",
        type: "bar",
        stack: "总量",
        itemStyle: {
          color: "#5FB3FF",
          borderRadius: 0,
        },
        data: value4Data
      },
      {
        name: "深谷",
        type: "bar",
        stack: "总量",
        itemStyle: {
          color: "#494dfe",
          borderRadius: 0,
        },
        data: value5Data
      }
    ]
  }
  chartInstance.setOption(option);
  chartInstance.resize();
}

// 分时段two
const dayPartingTwoFn = () => {
  // const dataList = [
  //   { value: 335, rate: 32.43, legendname: '尖', name: "尖", itemStyle: { color: "#FF5A5A" }, color: 'red' },
  //   { value: 310, rate: 30.01, legendname: '平', name: "平", itemStyle: { color: "#02CD93" }, color: 'green' },
  //   { value: 234, rate: 22.65, legendname: '峰', name: "峰", itemStyle: { color: "#F4B25A" }, color: 'yellow' },
  //   { value: 154, rate: 14.91, legendname: '谷', name: "谷", itemStyle: { color: "#5FB3FF" }, color: 'kohlrabiblue' },
  //   { value: 124, rate: 14.91, legendname: '深谷', name: "深谷", itemStyle: { color: "#494dfe" }, color: 'darkBlue' },
  // ];
  const dataList = monthTotal.list
  const chartInstance = echarts.init(dayPartingTwoRef.value);
  let width = 90
  let align = 'right'
  const option = {
    title: [{
      text: '{val|' + `${monthTotalVal.value}` + '}\n{name|' + '当月总计(kW·h)' + '}',
      top: '20%',
      left: 'center',
      textStyle: {
        rich: {
          name: {
            fontSize: 14,
            color: '#838D9A',
          },
          val: {
            fontSize: 28,
            fontWeight: 'bold',
            color: '#333333',
            padding: [10, -18]
          }
        }
      }
    }],
    tooltip: {
      trigger: 'item',
      formatter: function (parms: { marker: string; data: { legendname: string; value: string; }; percent: string; }) {
        var str = parms.marker + "" + parms.data.legendname + "</br>" +
          "数量：" + parms.data.value + "</br>" +
          "占比：" + parms.percent + "%";
        return str;
      }
    },
    legend: {
      orient: 'vertical',
      icon: 'circle',
      bottom: '0',
      left: 'center',
      right: 'center',
      align: 'left',
      height: 160,
      formatter: (name: string) => {
        if (dataList.length) {
          const item = dataList.filter((item) => item.name === name)[0];
          return `{name|${name} : }{value|${item.value}}{${item.color}|${item.rate}%}`;
        }
      },
      textStyle: {
        verticalAlign: 'middle',
        rich: {
          name: {
            width: 40,
            color: '#333333',
            fontSize: 16,
            fontWeight: 400
          },
          value: {
            color: '#333333',
            fontSize: 16,
            fontWeight: 'bold',
            align: 'right',
            width: 80,
          },
          green: {
            color: '#02CD93',
            fontSize: 16,
            width,
            align,
          },
          red: {
            color: '#FF5A5A',
            fontSize: 16,
            width,
            align,
          },
          yellow: {
            color: '#F4B25A',
            fontSize: 16,
            width,
            align,
          },
          kohlrabiblue: {
            color: '#5FB3FF',
            fontSize: 16,
            width,
            align,
          },
          darkBlue: {
            color: '#494dfe',
            fontSize: 16,
            width,
            align,
          },
        },
      },
      data: ['尖', '平', '峰', '谷', '深谷'],
    },
    series: [
      {
        name: '',
        type: 'pie',
        center: ['50%', '30%'],
        radius: ['40%', '55%'],
        clockwise: false, //饼图的扇区是否是顺时针排布
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        labelLine: {
          length: 5,
          length2: 3,
          smooth: true,
        },
        data: dataList
      }
    ]
  }
  chartInstance.setOption(option);
  chartInstance.resize();
}

const hexToRgba = (hex: string, opacity: any) => {
  let rgbaColor = "";
  let reg = /^#[\da-f]{6}$/i;
  if (reg.test(hex)) {
    rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
      "0x" + hex.slice(3, 5)
    )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
  }
  return rgbaColor;
}

const energySearch = (e: any, type: string, is: any) => { // 用能筛选
  console.log('e', e, 'type', type)
  switch (type) {
    case 'energy':
      if (['水', '气'].includes(e)) {
        tabsList.value = [
          {
            name: '总用能',
            value: '总用能'
          }
        ]
        energyForm.value.tabValue = "总用能";
        nextTick(() => {
          if (e == '水') energySearch("总用能", "tabValue", 'water')
          if (e == '气') energySearch("总用能", "tabValue", 'gas')
        })
      } else {
        tabsList.value = [
          {
            name: '分时段',
            value: '分时段'
          },
          {
            name: '总用能',
            value: '总用能'
          }
        ]
        nextTick(() => {
          energySearch("总用能", "tabValue", 'ele')
        })
      }
      break;
    case 'tabValue':
      if (e === "总用能") {
        if(is == 'ele') {
          tabsList.value = [
            {
              name: '分时段',
              value: '分时段'
            },
            {
              name: '总用能',
              value: '总用能'
            }
          ]
          energyForm.value.energy = '电'
          dailyTrendFn('ele')
          currentTrendFn('ele')
        } else if(is == 'water') {
          dailyTrendFn('water')
          currentTrendFn('water')
        } else if(is == 'gas') {
          dailyTrendFn('gas')
          currentTrendFn('gas')
        }
      } else {
        dayPartingOneFn()
        dayPartingTwoFn()
      }
      break;
    default:
      break;
  }
  energyForm.value[type] = e;
}

</script>

<style lang="scss" scoped>
.dashboard {
  padding: 11px 16px;
  background: #F2FBF9;
  margin-top: -40px;
}

.dashboard-header {
  float: right;
  position: relative;
  margin-bottom: 16px;
  z-index: 2;

  .dashboard-header-form {
    display: flex;

    :deep(.el-select) {
      width: 160px;
      margin-left: 8px;
    }

    :deep(.el-select):first-child {
      margin-left: 0px;
    }
  }
}

.dashboard-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;

  .card-items {
    width: 32%;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.06);
    background: #FFFFFF;

    .card-items-header {
      border-radius: 8px 8px 0px 0px;
      display: flex;
      flex-direction: column;
      color: #F2FBF9;
      padding: 16px 16px 24px 16px;

      .card-items-header-title {
        margin-bottom: 10px;
        display: flex;

        img {
          margin-right: 5px;
          height: 16px;
          width: 16px;
        }
      }

      .card-items-header-data {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .card-items-header-data-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          overflow: hidden;

          .header-data-item-sum {
            font-weight: bold;
            font-size: 36px;
            margin-bottom: 8px;
            white-space: nowrap;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 98%;
            text-align: center;
          }

          .header-data-item-title {
            flex: 1;
            font-weight: 400;
            font-size: 16px;
            white-space: nowrap;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 98%;
            text-align: center;
          }

          .header-data-item-content {
            height: 80px;
            flex: 1;
            font-weight: 400;
            font-size: 16px;
            white-space: nowrap;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 98%;
            text-align: center;


            span:nth-child(2) {
              margin-left: 4px;
              position: relative;
              padding: 1px 8px 1px 18px;
              background: #FFFFFF;
              border-radius: 10px 10px 10px 10px;
              display: inline-block;
            }
          }
        }
      }
    }

    .card-items-content {
      color: #333333;
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 36px 28px 50px 28px;

      .card-items-content-data {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;

        .card-items-content-data-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          overflow: hidden;

          .content-data-item-sum {
            font-weight: bold;
            font-size: 30px;
            margin-bottom: 8px;
            white-space: nowrap;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 98%;
            text-align: center;
          }

          .content-data-item-title {
            flex: 1;
            font-weight: 400;
            font-size: 16px;
            white-space: nowrap;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 98%;
            text-align: center;
          }

          .content-data-item-content {
            flex: 1;
            font-weight: 400;
            font-size: 16px;
            white-space: nowrap;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 98%;
            text-align: center;

            span:nth-child(2) {
              margin-left: 4px;
              position: relative;
              padding: 1px 8px 1px 18px;
              background: #FFFFFF;
              border-radius: 10px 10px 10px 10px;
              width: 60px;
              height: 20px;
              color: #00B973;
            }
          }
        }

      }

      .card-items-content-data:last-child {
        margin-bottom: 0px;
      }
    }

    .data-item-contentJust::after {
      position: absolute;
      top: 0;
      left: 6px;
      content: '';
      height: 0;
      width: 0;
      border-top: 6px solid transparent;
      border-bottom: 10px solid #00B973;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
    }

    .data-item-contentLose::after {
      position: absolute;
      top: 6px;
      left: 6px;
      content: '';
      height: 0;
      width: 0;
      border-top: 10px solid #F56C6C;
      border-bottom: 6px solid transparent;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
    }

    .textRedColor {
      color: #F56C6C !important;
    }

    .textGreenColor {
      color: #00B973;
    }

    .electro {
      background: #5FB3FF;
      box-shadow: 0px 20px 20px 1px rgba(114, 172, 248, 0.3);
    }

    .water {
      background: #03CCA1;
      box-shadow: 0px 20px 20px 1px rgba(121, 253, 200, 0.3);
    }

    .useAir {
      background: #F7B955;
      box-shadow: 0px 20px 20px 1px rgba(253, 214, 121, 0.3);
    }

    &:first-child {
      margin-left: 0;
    }
  }
}

/* 媒体查询 */
@media (max-width: 1560px) {

  .dashboard-card {
    .header-data-item-sum {
      font-size: 24px !important;
    }

    .content-data-item-sum {
      font-size: 20px !important;
    }

    .header-data-item-content {
      line-height: 20px;
      font-size: 11px !important;
    }

    .header-data-item-title {
      font-size: 11px !important;
    }

    .content-data-item-sum {
      font-size: 20px !important;
    }

    .content-data-item-title {
      font-size: 11px !important;
    }

    .content-data-item-content {
      font-size: 11px !important;
    }
  }

  .dashboard-echarts {
    .echarts-header {
      .echarts-header-title {
        font-size: 14px;
      }

      .echarts-header-form {
        :deep(.el-radio-button__inner) {
          font-size: 12px !important;
        }

        :deep(.el-select) {

          .el-select__wrapper {
            font-size: 12px !important;
          }
        }
      }
    }

    .echarts-content {
      .dailyTrend {
        div:nth-child(1) {
          font-size: 12px !important;
        }
      }

      .currentTrend {
        div:nth-child(1) {
          font-size: 12px !important;
        }
      }
    }
  }
}

.dashboard-echarts {
  width: 100%;
  height: 490px;
  background: #FFFFFF;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.06);
  border-radius: 8px 8px 8px 8px;
  padding: 20px 24px;
  overflow-y: hidden;
  overflow-x: auto;

  .echarts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    .echarts-header-title {
      font-weight: bold;
      color: #333333;
      font-size: 16px;
      display: flex;
      align-items: center;
    }

    .echarts-header-form {
      display: flex;

      :deep(.el-select) {
        width: 160px;
        margin-left: 8px;
      }

      :deep(.el-select):first-child {
        margin-left: 0px;
      }
    }
  }

  .echarts-content {
    display: flex;
    justify-content: space-between;

    .dailyTrend {
      width: 40%;

      div:nth-child(1) {
        background: #F5FDFB;
        border-radius: 8px 8px 0px 0px;
        padding: 12px 16px;
        font-weight: bold;
        font-size: 16px;
        color: #606266;
      }
    }

    .currentTrend {
      margin-left: 24px;
      width: 60%;

      div:nth-child(1) {
        background: #F5FDFB;
        border-radius: 8px 8px 0px 0px;
        padding: 12px 16px;
        font-weight: bold;
        font-size: 16px;
        color: #606266;
      }
    }
  }
}
</style>
<style lang="scss" scopeli>
.app-breadcrumb {
  z-index: 1;
}
</style>